<template>
  <div>
    <div class="title2">
      <h1>欢迎来到安居客</h1>
      <h5>实现每一个人对于家的梦</h5>
    </div>

    <div class="phone">
      <input
        type="text"
        class="inp1"
        placeholder="请输入手机号..."
        ref="input1"
        v-model="text1"
      />
    </div>
    <div class="green"></div>

    <div class="bun">
      <button value="登录" @click="mobel">登录</button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      text1: "",
      // msg: this.text1,
    };
  },
  methods: {
    mobel() {
      // this.test1 = this.$refs.input1.value;
      // console.log(this.test1); //获取input1的值，减少获取dom节点的消耗???这句干啥？你上面不是双向绑定了么
      let reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
      if (this.test1 == "" || !reg.test(this.text1)) {
        // console.log("vvv");
        this.$message.error("手机号不能为空/输入不合法");
        return;
      }
      // console.log(this.$refs.input1.value);
      // console.log(this.text1);
      if (reg.test(this.text1)) {
        // console.log(111);
        this.$message({
          message: "恭喜你，登陆成功！",
        });
        // alert("恭喜你，登陆成功！");
        this.denglu();
      }
    },
    denglu() {
      let str = {
        text1: this.text1,
      };
      axios({
        url: "http://localhost:3000/phone",
        method: "get",
        data: str,
      }).then((res) => {
        console.log(res.data);
        if (!res.data == "") {
          y;

          console.log(this.text1);
          localStorage.setItem("text1", this.text1);
        }
      });
      // .catch((err) => {
      //   console.log("出错了", err);
      // });

      this.$router.push("/about");
      this.$router.go(0);
      // <router-link v-bind:to="{name:'about',params:{text:this.text1}}">
      // </router-link>;
    },
  },
};
</script>
<style scoped>
.title2 {
  margin-top: 50px;
}
h1,
h5 {
  margin: 5px 20px;
}

.phone {
  width: 100%;
  height: 150px;
  position: relative;
  margin-top: 10px;
  /* top: 1rem; */
  /* box-sizing: border-box;
  padding: 0 30px; */

  color: #000;
  /* border: 1px solid red; */
}
.inp1 {
  display: inline-block;
  position: absolute;

  height: 0.8rem;
  width: 2rem;
  /* bottom: 0; */
  left: 0.6rem;
  font-size: 0.32rem;
  top: 0.5rem;
  /* left: 10px; */
  outline: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 0.01rem soild rgb(241, 239, 239);
  /* margin: 0 0.2rem; */
  font-weight: 700;
  color: #000;
  font-size: 0.38rem;
  width: 90%;
}
.green {
  margin-top: 0.2rem;
}
.inp2 {
  position: relative;
  float: left;
  left: 0.03rem;
  width: 0.2rem;
  height: 0.2rem;
  margin-top: -0.06rem;
  top: 0.05rem;
}
h6 {
  font-size: 0.04rem;
}
button {
  margin-top: 0.3rem;
  line-height: 0.5rem;
  width: 100%;
  height: 0.6rem;
  background-color: rgb(117, 209, 117);
  color: #fff;
  font-size: 0.24rem;
}
</style>